<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>reveal.js</title>

    <link rel="stylesheet" href="css/reveal.css">
    <!-- <link rel="stylesheet" href="css/theme/black.css"> -->
    <link rel="stylesheet" href="css/theme/moon.css">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>

    <style>
        .xue_le_file_bg.slide-background {
            background-size: contain!important;
        }
    </style>

</head>

<body>
    <div class="reveal">
        <div class="slides">
            <section>
                <h3> 学乐云及视频录播直播分享讨论</h3>
                <p>
                    <small>汇报人 - 王孟贵 </small>
                </p>
            </section>
            <section data-transition="zoom">
                <h3>自我介绍</h3>
                <ul>
                    <li class="fragment fade-up">
                        <span class="fragment">主攻方向：</span>
                        <span class="fragment">前端架构</span>
                    </li>
                    <li class="fragment fade-up">
                        <span class="fragment">相关技术:</span>
                        <span class="fragment">java,andorid,linux,hadoop均有了解</span>
                    </li>
                    <li class="fragment fade-up">
                        <span class="fragment">经历走向:</span>
                        <span class="fragment"> 前端</span>
                        <span class="fragment"> ==></span>
                        <span class="fragment">Net</span>
                        <span class="fragment"> ==></span>
                        <span class="fragment"> 前端</span>
                    </li>
                    <li class="fragment fade-up">
                        <span class="fragment">目前定位:</span>
                        <span class="fragment  "> 突破语言限制 </span>
                        <span class="fragment "> 以产品为中心 </span>
                        <span class="fragment "> 结果为导向 </span>
                        <span class="fragment "> 技术为工具 </span>
                        <span class="fragment "> 技术到产品的实践者,践行者 </span>
                    </li>
                </ul>

            </section>



            <section data-background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523953001718&di=3ee00c08321aed5df99aad17295d8006&imgtype=0&src=http%3A%2F%2Fblog.itpub.net%2Fattachment%2F201503%2F16%2F30022540_1426497035R7d8.jpg">

            </section>

            <section>
                <h3>直播业务</h3>
                <p class="fragment grow  highlight-blue">
                    <small>采集推流端</small>
                </p>
                <p class="fragment grow  highlight-red">
                    <small>流媒体服务端</small>
                </p>
                <p class="fragment grow  highlight-green">
                    <small>播放端</small>
                </p>
            </section>

            <section>
                <section>
                    <h3>nginx+rtmp+obs+ckplayer 直播录播演示</h3>
                </section>
                <section>
                    <h3>nginx</h3>
                    <p class="fragment">
                        高性能的HTTP和反向代理
                        <span class="fragment highlight-blue">服务器</span>
                    </p>
                    <p class="fragment">
                        也是个IMAP/POP3/SMTP
                        <span class="fragment highlight-blue">服务器</span>
                    </p>
                </section>
                <section>
                    <h3>rtmp</h3>
                    <p class="fragment">Real Time Messaging Protocol </p>
                    <p class="fragment">
                        实时消息传输
                        <span class="fragment highlight-blue">协议</span>
                    </p>
                </section>
                <section>
                    <h3>obs</h3>
                    <p>
                        <span class="fragment highlight-green">实时</span>
                        <span class="fragment highlight-red">流媒体</span>
                        <span class="fragment highlight-blue">直播和录制</span>
                        <span class="fragment highlight-green">免费</span>
                        <span class="fragment highlight-red">开源</span>
                        <span class="fragment highlight-blue">软件</span>
                    </p>
                </section>
            </section>





            <!-- <section  class="none">

                <section>
                    <h3>
                        <span class="fragment highlight-current-blue grow">截屏</span>
                        <span class="fragment highlight-current-blue shrink">录播</span>
                        <span class="fragment highlight-current-blue fade-up">直播</span>
                        <span class="fragment highlight-current-blue grow">视频聊天</span>
                    </h3>

                </section>
                <section>
                    <h3>截屏</h3>
                </section>

                <section>
                    <h3>录播</h3>
                </section>

                <section>
                    <h3>直播</h3>
                </section>

                <section>
                    <h3>视频聊天</h3>
                </section>

            </section> -->

            <section>
                <section>
                    <h3>直播协议：RTMP And HLS</h3>
                </section>
                <section>
                    <h3>RTMP</h3>
                    <div style="font-size:40px;text-align:left; line-height:40px;">
                        <p>
                            <small class="fragment fade-up">实时消息传输协议，Real Time Messaging Protocol</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">RTMP是一种设计用来进行实时数据通信的网络协议</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">Adobe Systems 公司为 Flash 播放器和服务器之间音频、视频和数据传输开发的开放协议</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">协议基于 TCP，是一个协议族，包括 RTMP 基本协议及 RTMPT/RTMPS/RTMPE 等多种变种。</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">主要用来在 Flash/AIR 平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">整体流程中流转的是一条数据流,服务器不会有落地文件</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">延时小,通常用1~3秒</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">基于TCP长链接,不需要多次建立连接</small>
                        </p>

                    </div>



                </section>
                <section>
                    <h3>HLS</h3>
                    <div style="font-size:40px;text-align:left; line-height:30px;">
                        <p>
                            <small class="fragment fade-up">苹果公司实现的基于 HTTP 的流媒体传输协议 全称 HTTP Live Streaming</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">采集方式是每隔几秒将数据封包.ts的文件推送到服务器</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">.m3u8的文件,用来记录.ts的索引 播放时下载最新的片段播放(F12演示)</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">理论上的延时为一个.ts文件的时长,一般推荐10秒一个分片</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">通常情况下延时20~20秒,对于有互助体验的直播来说是不可接受的</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">基于短连接HTTP,HTTP又基于TCP. TCP每次三次握手,慢启动过程,断时再次挥手</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">优点:基于HTTP协义,不用考虑防火墙或者代理问题</small>
                        </p>
                        <p>
                            <small class="fragment fade-up">优点:IOS天然支持,AVPlayer就可以播放</small>
                        </p>

                    </div>

                </section>
            </section>

            <section>
                <h3>RTMP vs. HLS</h3>
                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th>RTMP</th>
                            <th>HLS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>开发公司</td>
                            <td>adobe</td>
                            <td>苹果</td>
                        </tr>
                        <tr>
                            <td>延时(测试)</td>
                            <td>1~3秒</td>
                            <td>20~30秒</td>
                        </tr>
                        <tr>
                            <td>底层协议</td>
                            <td>TCP</td>
                            <td>短连接HTTP</td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <section>
                <h3> 乐学云客户端包装目录分析 </h3>
            </section>

            <section class="xue_le_file_bg" data-background="wmg_images/乐学云程序目录结构.jpg">

            </section>

            <section>
                <section>
                    <h3>关键字</h3>
                    <p>
                        <span class="fragment  highlight-green">FFMPEG</span>
                        <span class="fragment  highlight-red">CEF</span>
                        <span class="fragment  highlight-blue">SwiftShader </span>
                        <span class="fragment  highlight-green">Nginx</span>
                        <span class="fragment  highlight-blue">Chromium</span>
                    </p>
                </section>
                <section>
                    <h3>FFMPEG</h3>
                    <p>
                        记录、转换数字音频、视频，并能将其
                        <span class="fragment  highlight-blue">转化</span>为流类库
                    </p>
                </section>
                <section>
                    <h3>CEF</h3>
                    <ul>
                        <li class="fragment">Chromium Embedded Framework</li>
                        <li class="fragment">基于Google Chromium项目的开源Web browser控件</li>
                        <li class="fragment">支持Windows, Linux, Mac平台</li>
                        <li class="fragment">除了提供C/C++接口外，也有其他语言的移植版</li>
                    </ul>
                </section>
                <section>
                    <h3>SwiftShader</h3>
                    <ul>
                        <li class="fragment">基于CPU的OpenGL ES和Direct3D 9图形库</li>
                        <li class="fragment">为高级3D图形提供硬件独立性。</li>
                    </ul>
                </section>
                <section>
                    <h3>Nginx</h3>
                    <ul>
                        <li class="fragment">高性能的HTTP和反向代理
                            <span class="fragment highlight-blue">服务器</span>
                        </li>
                        <li class="fragment">也是个IMAP/POP3/SMTP
                            <span class="fragment highlight-blue">服务器</span>
                        </li>
                    </ul>
                </section>
                <section>
                    <h3>Chromium</h3>
                    <ul>
                        <li class="fragment">Google 创造的一个开源库，。
                            <span class="fragment highlight-blue">服务器</span>
                        </li>
                        <li class="fragment">
                            用于Google 的浏览器
                            <span class="fragment highlight-blue">Chrome</span>
                        </li>
                    </ul>
                </section>
            </section>


            <section>

                <section>
                    <h3>
                        <span class="fragment highlight-current-blue grow">Chromium</span>集成方案</h3>
                </section>
                <section>
                    <h3>electron</h3>
                    <small>
                        使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
                    </small>
                </section>
                <section>
                    <h3>WinForm+Chromium</h3>
                    <small>
                        原生WinForm应用开发,内嵌Chromium
                    </small>
                </section>
            </section>


            <section>
                <section>
                    <h3>千聊PPT式授课</h3>
                    <ul>
                        <li class="fragment fade-up">
                            Socket图片切换
                        </li>
                        <li class="fragment fade-up">
                            音频连麦
                        </li>
                        <li class="fragment fade-up">
                            非视频直播. 但节省网络流量
                        </li>
                    </ul>

                </section>
                <section data-background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523960050354&di=06b7163c1b4927e74b7e5239125ede50&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171025%2F19ffc90723454a32ad324afb8bdee5fd.jpeg">
                </section>
                <section>
                    <h3>简易演示</h3>
                    <p>
                        <a target="_blank" href="http://www.easylearn.com:8888/slide_show_01">老师端</a>
                        <a target="_blank" href="http://www.easylearn.com:8888/slide_show_02">学生端</a>
                    </p>
                </section>
            </section>


            <section>
                <section>
                    <h3>WebRTC</h3>
                    <ul>
                        <li>
                            Web Real-Time Communication
                        </li>
                        <li>网页浏览器进行实时语音对话或视频对话的技术</li>
                        <li>2011年5月开放了工程的源代码</li>
                        <li>包括音视频的采集、编解码、网络传输、显示等功能</li>
                        <li>直接在浏览器之间P2P地传输流</li>
                        <li>10人以上的视频很耗资源Chrome容易崩溃</li>
                        <li>小型视频会议用</li>
                    </ul>
                </section>

                <section>
                    <h3>结合产品</h3>
                    <ul>
                        <li>适用场景 教师与学生面对面视频</li>
                        <li>内嵌到我方产品，配合socket实现老师与学生面对面视频。</li>
                    </ul>
                </section>

                <section>
                    <h3>演示</h3>
                    <p>
                        <img src="./wmg_images/webrtc.jpg" alt="">
                    </p>
                </section>
            </section>


            <section>
                <h4>本期产品建议</h4>
                <ul style="line-height:60px;">
                    <li>因七牛云不支持推送端SKD. 快速变现产品为主</li>
                    <li>推送端直接使用obs</li>
                    <li>本期工作重心放在,视频产品流程及七牛对接上</li>
                    <li>支持客户端直接录播上传推送</li>
                    <li>后期直播本身如需集成到项目,采用尝试以下方案
                        <ul>
                            <li>Obs软件代码设置并后台调用</li>
                            <li>Obs码源改造并集成</li>
                            <li>三方开源库推流</li>
                        </ul>
                    </li>
                </ul>
            </section>


            <section>
                <h4>本期技术选型建议</h4>
                <ul style="line-height:60px;">
                    <li>优先WinForm+Chromium,再Electron</li>
                    <li>Chromium前端技术实现大部分功能</li>
                    <li>Chromium前端技术带来好的UI和体验</li>
                    <li>更底层的调用C++或C#</li>
                    <li>如选Electron也是支持调用C++和C#</li>
                </ul>
            </section>

            <section>
                <h4>接下来的挑战</h4>
                <ul style="line-height:60px;">
                    <li>electron研究,常见场景打样</li>
                    <li>electron与C++/C# 互调打通</li>
                    <li>七牛云SDK与应用场景切合</li>
                    <li>PC端主流播放器选用调研,七牛已支持手机App</li>
                    <li>内网直播服务器搭建与优化 - 支持局域网与七牛外网同时 </li>
                    <li>C++入门学习</li>
                    <li>FFmpeg研究</li>
                    <li>OBS开源代码研究</li>
                </ul>
            </section>



        </div>
    </div>

    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.js"></script>

    <script>
        // More info about config & dependencies:
        // - https://github.com/hakimel/reveal.js#configuration
        // - https://github.com/hakimel/reveal.js#dependencies
        Reveal.initialize({
            backgroundTransition: 'zoom',
            controls: true,
            progress: true,
            history: true,
            center: true,
            transition: 'slide', // none/fade/slide/convex/concave/zoom
            dependencies: [{
                src: 'plugin/markdown/marked.js'
            }, {
                src: 'plugin/markdown/markdown.js'
            }, {
                src: 'plugin/notes/notes.js',
                async: true
            }, {
                src: 'plugin/highlight/highlight.js',
                async: true,
                callback: function () {
                    hljs.initHighlightingOnLoad();
                }
            }]
        });
    </script>
</body>

</html>